<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				width:1200px;
				height:400px;
			}
			#ulText{
				/* margin:10px auto; */
				list-style: none;
				width:500px;
				overflow: hidden;
				float: left;
			}
			#ulList{
				list-style: none;
				width:650px;
				overflow: hidden;
				float: left;
				margin:10px 0;
			}
			#ulList li{
				float: left;
				border:1px solid #ddd;
				width:150px;
				text-align: center;
			}
			#ulText li{
				float: left;
				border:1px solid #ddd;
				width:150px;
				text-align: center;
			}
			#divText{
				width:500px;
				
				overflow: hidden;
			}
			#divList{
				width:500px;
				margin:5px auto;
				overflow: hidden;
				
			}
			.img{
				float: left;
			}
			.pro{
				float: left;
				width:400px;
				margin-left:20px;
			}
			.pro .title{
				font-size:20px;
			}
			.pro .price{
				font-size: 18px;
			}
			.progress{
				
				width:300px;
				height:10px;
				background: #e9e6dd;
			}
			.bgDanger{
				background: #f62f5d!important;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul id="ulText">
			</ul>
			<ul id="ulList">
			</ul>
		</div>
		<div id="divText">
			<div id="divList">
			</div>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				var xhr = new XMLHttpRequest();
				xhr.open("GET", "data.json", true);
				xhr.responseType = "json";
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var proList = xhr.response.productionMonth.value.productionList;
						var yearList = xhr.response.yearProductionTask.value.monthData;
						
						getYearList(yearList)
						getProList(proList)
						getProPercent(proList)
												
					}
				}
				var ulHtml = "";
				var divHtml = "";
				var ulListHtml ="";
				xhr.send();
				var ul = document.getElementById("ulText");
				var div = document.getElementById("divList");
				var ulList = document.getElementById("ulList");
				function getProList(list) {
					list.forEach(function(i) {
						ulHtml += "<li>" + i.name + "</li>" + 
						"<li>" + i.monthlyPlan + "</li>" + 
						"<li>" + i.monthChattels + "</li>"
						
					})
					ul.innerHTML = ulHtml;
				}
				function getYearList(list){
					list.forEach(function(i) {
						ulListHtml += "<li>" + i.month + "</li>"+
						"<li>" + i.monthlyPlan + "</li>"+ 
						"<li>" + i.monthChattels + "</li>"+
						"<li>" + i.monthSuperowe + "</li>"
					})
					ulList.innerHTML = ulListHtml;
				}

				function getProPercent(list) {
					list.forEach(function(i) {
						var stPrice = (i.monthlyPlan / 100) + '%'
						divHtml += "<div id='divList'>" +
							"<div class='img'><img src='timg1.png'></div>" +
							"<div class='pro'>" +
							"<p class='title'>" + i.name + "</p>" +
							"<p class='price'>均价:" + i.monthlyPlan + "元</p>" +
							"<div class='progress'>" +
							"<div class='bgDanger' style='width:" + stPrice + "'></div>" +
							"</div>" +
							"</div>" +
							"</div>"

					})
					div.innerHTML = divHtml;
				}
				
			}
		</script>
	</body>
</html>
